<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<script type="text/javascript" src="../js/prototype.js"></script>
<script language="Javascript">
function fnSubmit()
{
	if(fnValidateMandatory() == false){
		return false;
	}
	
	if(validateImageUpload(document.getElementById("question_image").value.toUpperCase()) == false){
		return false;
	}	
	if(validateImageUpload(document.getElementById("answer_option_image1").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image2").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image3").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image4").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image5").value.toUpperCase()) == false){
		return false;
	}
	var ansOpt = document.getElementsByName("answer_option");	
	var index = 0;
	var ansOptionMap = new Array();
	for(index=0;index< ansOpt.length;index++){
		if(ansOpt[index].value.strip()!= ""){			
			if(ansOptionMap[ansOpt[index].value.strip()] == undefined){
				ansOptionMap[ansOpt[index].value.strip()] = ansOpt[index].value;				
			}else{
				alert("Duplicate answer option value");
				ansOpt[index].focus();
				return false;
			}
		}
	}
	document.questionForm.action='/createQuestion.do?';
	document.questionForm.submit();
}

function fnValidateMandatory(){
	if(document.getElementById("question_statement").value == ""){
		alert('Question Statement is Mandatory');
		document.getElementById("question_statement").focus();
		return false;
	}
	if(document.getElementById("question_category_id").value == ""){
		alert('Question Category is Mandatory');
		document.getElementById("question_category_id").focus();
		return false;
	}
	if(document.getElementById("question_level_id").value == ""){
		alert('Question Level is Mandatory');
		document.getElementById("question_level_id").focus();
		return false;
	}
	var isCorrect = document.getElementsByName("is_correct");
	var isChecked= false;
	for(i=0;i<isCorrect.length;i++){
		if(isCorrect[i].checked){
			if(isCorrect[i].disabled == false){
			isChecked=true;
			break;
			}
		}
	}
	<logic:equal name="questionForm" property="is_updatable" value="true">
	if(!isChecked){
		alert('Please select Correct Answer');
		return false;
	}
	</logic:equal>
	return true;
}

function fnUpdate()
{
	if(fnValidateMandatory() == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("question_image").value.toUpperCase()) == false){
		return false;
	}	
	if(validateImageUpload(document.getElementById("answer_option_image1").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image2").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image3").value.toUpperCase()) == false){
		return false;
	}
	if(validateImageUpload(document.getElementById("answer_option_image4").value.toUpperCase()) == false){
		return false;
	}	
	if(validateImageUpload(document.getElementById("answer_option_image5").value.toUpperCase()) == false){
		return false;
	}
	var ansOpt = document.getElementsByName("answer_option");	
	var index = 0;
	var ansOptionMap = new Array();
	for(index=0;index< ansOpt.length;index++){
		if(ansOpt[index].value.strip()!= ""){			
			if(ansOptionMap[ansOpt[index].value.strip()] == undefined){
				ansOptionMap[ansOpt[index].value.strip()] = ansOpt[index].value;				
			}else{
				alert("Duplicate answer option value");
				ansOpt[index].focus();
				return false;
			}
		}
	}
	document.questionForm.screen_type.value="Edit";
	document.questionForm.action='/updateQuestion.do?';
	document.questionForm.submit();
}

function validateImageUpload(filePath)
{	
	if(filePath.length == 0 || (filePath.length - filePath.indexOf(".JPG"))==4 || (filePath.length - filePath.indexOf(".BMP"))==4)
	{		
		return true;
	} 
	else
	{
		alert("Only JPG and BMP file can be uploaded");
		return false;
	}	
}
function enableRadio(index){
	var ansOpt = document.getElementsByName("answer_option");
	var isCorrect = document.getElementsByName("is_correct");	
	var idValue = "answer_option_image"+(parseInt(index)+1);
	if(ansOpt[index].value!=""){
		isCorrect[index].disabled = false;
		document.getElementById(idValue).disabled = false;
	}else{
		if(document.getElementById(idValue).value ==""){
			isCorrect[index].disabled = true;
			isCorrect[index].checked = false;
		}
		
	}
}
function enableRadioByImage(index){
	var ansOpt = document.getElementsByName("answer_option");
	var isCorrect = document.getElementsByName("is_correct");	
	var idValue = "answer_option_image"+(parseInt(index)+1);
	if(document.getElementById(idValue).value!=""){
		isCorrect[index].disabled = false;
		document.getElementById(idValue).disabled = false;
	}else{
		if(ansOpt[index].value==""){
			isCorrect[index].disabled = true;
			isCorrect[index].checked = false;
		}
		
	}
}
</script>
<html:form action="/question" enctype="multipart/form-data">
	<html:hidden property="screen_type"/>
	<html:hidden property="question_id"/>
	<html:hidden property="is_updatable" styleId="is_updatable"/>
	<%String linktab = (String)request.getAttribute("selectedTab"); %>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td>
	    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	  			<tr>
					<%if("CREATE".equalsIgnoreCase(linktab)) {%>
				    <td class="activeTabc1"></td>
				    <td class="activeTabbg"><div align="center" class="style10"><a href="<%=request.getAttribute("createLink")%>">Create</a></div></td>
				    <td class="activeTabc2"></td>
					<%} else {%>
					<td class="inactiveTabc1"></td>
				    <td class="inactiveTabbg"><div align="center" class="style11"><a href="<%=request.getAttribute("createLink")%>">Create</a></div></td>
				    <td class="inactiveTabc2"></td>
					<%}%>
				    <td class="spacer"></td>
					<%if("EDIT".equalsIgnoreCase(linktab)) {%>
					<td class="activeTabc1"></td>
				    <td class="activeTabbg4"><div align="center" class="style10"><a href="<%=request.getAttribute("editLink")%>">Edit</a></div></td>
				    <td class="activeTabc2"></td>
					<%} else{%>
				    <td class="inactiveTabc1"></td>
				    <td class="inactiveTabbg4"><div align="center" class="style11"><a href="<%=request.getAttribute("editLink")%>">Edit</a></div></td>
				    <td class="inactiveTabc2"></td>
					<%}%>
				    <td class="spacer"></td>
					<%if("VIEW".equalsIgnoreCase(linktab)) {%>
					<td class="activeTabc1"></td>
				    <td class="activeTabbg4"><div align="center" class="style10"><a href="<%=request.getAttribute("viewLink")%>">View</a></div></td>
				    <td class="activeTabc2"></td>
					<%} else{%>
				    <td class="inactiveTabc1"></td>
				    <td class="inactiveTabbg4"><div align="center" class="style11"><a href="<%=request.getAttribute("viewLink")%>">View</a></div></td>
				    <td class="inactiveTabc2"></td> 
					<%}%>
					<td class="spacer"></td>
					<%if("UPLOAD".equalsIgnoreCase(linktab)) {%>
					<td class="activeTabc1"></td>
				    <td class="activeTabbg4"><div align="center" class="style10"><a href="<%=request.getAttribute("uploadLink")%>">Upload</a></div></td>
				    <td class="activeTabc2"></td>
					<%} else{%>
				    <td class="inactiveTabc1"></td>
				    <td class="inactiveTabbg4"><div align="center" class="style11"><a href="<%=request.getAttribute("uploadLink")%>">Upload</a></div></td>
				    <td class="inactiveTabc2"></td>
					<%}%>
	  			</tr>
			</table>
		</td>
  	</tr>
  	<tr>
    	<td class="formbg" valign="top">
    		<table width="100%" border="0" cellspacing="0" cellpadding="0">
  				<tr>
    				<td>
    					<table width="100%" border="0" cellspacing="4" cellpadding="0">
							<tr>
								<td>&nbsp;</td>
								<logic:equal name="questionForm" property="screen_type" value="Edit">
								<logic:equal name="questionForm" property="is_updatable" value="false"><td class="heading1">(Not Updatable)</td>
								</logic:equal>
								<logic:notEqual name="questionForm" property="is_updatable" value="false"><td>&nbsp;</td>
								</logic:notEqual>
								</logic:equal>	
								<logic:notEqual name="questionForm" property="screen_type" value="Edit">
								<td>&nbsp;</td>
								</logic:notEqual>	
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td colspan="6"><jsp:include page="showErrorMessage.jsp" /></td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td class="formText">Statement<font class="asterix">*</font></td>
								<td  colspan="4"><html:textarea property="question_statement" styleId="question_statement" styleClass="form5" cols="4" rows="2"/>
								</td>
							</tr>
							<logic:equal name="questionForm" property="screen_type" value="View">
								<logic:present name="questionForm" property="question_image_id">
								<tr>
									<td align="left" valign="top" >&nbsp;</td>
									<td>							
								
										<%String contextPath = session.getAttribute("contextPath").toString();%>
										<img src='<%=contextPath+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="question_image_id"/>'
										alt="No Image Present">									
									</td>
								</tr>
								</logic:present>
							</logic:equal>
							<tr>
								<td align="left" valign="top" >&nbsp;</td>
								<td class="formText">Category<font class="asterix">*</font></td>
								<td valign="middle">
					         		<html:select property="question_category_id" styleId="question_category_id" styleClass="form2">
										<html:option value="">--Please Select--</html:option>
										<logic:present name="questionForm" property="categories">
										<logic:iterate name="questionForm" property="categories" id="category" >
										<bean:define id="dID" name="category" property="id" />
										<html:option  value="<%=dID.toString()%>"><bean:write name="category" property="name"/></html:option>						
										</logic:iterate>
										</logic:present>	
									</html:select>
								</td>
								<td class="formText">Difficulty Level<font class="asterix">*</font></td>
								<td valign="middle">
					         				<html:select property="question_level_id" styleId="question_level_id" styleClass="form3">
										<html:option value="">--Please Select--</html:option>
										<logic:present name="questionForm" property="levels">
										<logic:iterate name="questionForm" property="levels" id="level" >
										<bean:define id="dID" name="level" property="id" />
										<html:option  value="<%=dID.toString()%>"><bean:write name="level" property="name"/></html:option>						
										</logic:iterate>
										</logic:present>	
									</html:select>
								</td>
								<td align="left" valign="top" >&nbsp</td>
							</tr>
							<tr>
								<td align="left" valign="top" >&nbsp</td>
								<td class="formText">Status<font class="asterix">*</font></td>
								<td valign="middle">
									<html:select styleClass="form2" property="question_status" styleId="question_status" style=":width=25%">
										<html:option value="2">Active</html:option>
										<html:option value="3">InActive</html:option>
									</html:select>
								</td>
								<logic:equal name="questionForm" property="screen_type" value="">
									<td class="formText">Question Image</td>
									<td valign="middle"><html:file property="question_image" styleClass="formfile" styleId="question_image"/></td>
								</logic:equal>
								<logic:equal name="questionForm" property="screen_type" value="Edit">
									<td class="formText">Question Image</td>
									<td valign="middle"><html:file property="question_image" styleId="question_image"/></td>
								</logic:equal>
								<td >&nbsp</td>
							</tr>
							<tr>
								<td height="25" colspan="6" valign="top" >&nbsp;</td>
							</tr>
							
							<tr>
							<td >&nbsp</td>
								<td colspan="5" width="100%">
								<table  width="100%" border="0"   cellspacing="0" cellpadding="0">
								<tr>
							<td class="formText" colspan="3"><strong>Answer Options</strong></td>
							</tr>
								 <tr>
									<td class="innerBoxCorner1"></td>
									<td bgcolor="#a4a3a7"></td>
									<td class="innerBoxCorner2"></td>
								  </tr>
								  <tr>
									<td bgcolor="#a4a3a7"></td>
									<td>
									<table width="100%" border="0" bgcolor="#a4a3a7" cellspacing="0" cellpadding="0">
										<tr>
											<td align="center" class="formText">Is Correct</td><td align="center" class="formText">Statement</td><td align="center" class="formText">Image</td>
										</tr>
										<tr>
											<td align="center"><html:checkbox property="is_correct" styleId="is_correct" value="1" disabled="true"/></td>
											<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form4" onclick="javascript:enableRadio('0');" onblur="javascript:enableRadio('0');"/></td>
											<logic:notEqual name="questionForm" property="screen_type" value="View">
											<td align="center"><html:file property="answer_option_image1" styleClass="formfile"  styleId="answer_option_image1" onchange="javascript:enableRadioByImage('0');"/></td>
											</logic:notEqual>
											<logic:equal name="questionForm" property="screen_type" value="View">
											<td align="center">
											<logic:present name="questionForm" property="answer_option_image1_id">
												<%String contextPath1 = session.getAttribute("contextPath").toString();%>
												<img src='<%=contextPath1+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image1_id"/>'
													alt="No Image Present">
											</logic:present>
											</td>
											</logic:equal>
										</tr>		
										<tr>
											<td align="center"><html:checkbox property="is_correct" styleId="is_correct" value="2" disabled="true"/></td>
											<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form4" onclick="javascript:enableRadio('1');" onblur="javascript:enableRadio('1');"/></td>
											<logic:notEqual name="questionForm" property="screen_type" value="View">
											<td align="center"> <html:file property="answer_option_image2" styleClass="formfile" styleId="answer_option_image2"  onchange="javascript:enableRadioByImage('1');"  /></td>
											</logic:notEqual>
											<logic:equal name="questionForm" property="screen_type" value="View">
											<td align="center">
											<logic:present name="questionForm" property="answer_option_image2_id">
												<%String contextPath2 = session.getAttribute("contextPath").toString();%>
												<img src='<%=contextPath2+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image2_id"/>'
													alt="No Image Present">
											</logic:present>
											</td>
											</logic:equal>
										</tr>
										<tr>
											<td align="center"><html:checkbox property="is_correct" styleId="is_correct" value="3" disabled="true"/></td>
											<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form4" onclick="javascript:enableRadio('2');" onblur="javascript:enableRadio('2');"/></td>
											<logic:notEqual name="questionForm" property="screen_type" value="View">
											<td align="center"> <html:file property="answer_option_image3" styleClass="formfile" styleId="answer_option_image3"  onchange="javascript:enableRadioByImage('2');" /></td>
											</logic:notEqual>
											<logic:equal name="questionForm" property="screen_type" value="View">
											<td align="center">
											<logic:present name="questionForm" property="answer_option_image3_id">
												<%String contextPath3 = session.getAttribute("contextPath").toString();%>
												<img src='<%=contextPath3+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image3_id"/>'
													alt="No Image Present">
											</logic:present>
											</td>
											</logic:equal>
										</tr>
										<tr>
											<td align="center"><html:checkbox property="is_correct" styleId="is_correct" value="4" disabled="true"/></td>
											<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form4" onclick="javascript:enableRadio('3');" onblur="javascript:enableRadio('3');"/></td>
											<logic:notEqual name="questionForm" property="screen_type" value="View">
											<td align="center"> <html:file property="answer_option_image4" styleClass="formfile" styleId="answer_option_image4"  onchange="javascript:enableRadioByImage('3');" /></td>
											</logic:notEqual>
											<logic:equal name="questionForm" property="screen_type" value="View">
											<td align="center">
											<logic:present name="questionForm" property="answer_option_image4_id">
												<%String contextPath4 = session.getAttribute("contextPath").toString();%>
												<img src='<%=contextPath4+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image4_id"/>'
													alt="No Image Present">
											</logic:present>
											</td>
											</logic:equal>
										</tr>
										<tr>
											<td align="center"><html:checkbox property="is_correct" styleId="is_correct" value="5" disabled="true"/></td>
											<td align="center"><html:textarea property="answer_option" styleId="answer_option" cols="4" rows="2" styleClass="form4"   onclick="javascript:enableRadio('4');" onblur="javascript:enableRadio('4');"/></td>
											<logic:notEqual name="questionForm" property="screen_type" value="View">
											<td align="center"> <html:file property="answer_option_image5" styleClass="formfile"  styleId="answer_option_image5"  onchange="javascript:enableRadioByImage('4');" /></td>
											</logic:notEqual>
											<logic:equal name="questionForm" property="screen_type" value="View">
											<td align="center">
											<logic:present name="questionForm" property="answer_option_image5_id">
												<%String contextPath5 = session.getAttribute("contextPath").toString();%>
												<img src='<%=contextPath5+"/image?imageType=large&image_id="%><bean:write name="questionForm" property="answer_option_image5_id"/>'
													alt="No Image Present">
											</logic:present>
											</td>
											</logic:equal>
										</tr>
									</table>
								</td>
								<td bgcolor="#a4a3a7"></td>
								  </tr>
								  <tr>
									<td class="innerBoxCorner4"></td>
									<td bgcolor="#a4a3a7"></td>
									<td class="innerBoxCorner3"></td>
								  </tr>
								</table>
							</tr>
							<tr>
					    		<td width="100%" colspan="6">
					    			<table width="100%" border="0" cellspacing="0" cellpadding="0">
					      				<tr>
					        				<td class="lowerCorner1"></td>
					        				<td class="lowerbg">
					        					<div align="center">
					        					<logic:equal name="questionForm" property="screen_type" value="Edit">							
													<input type="button" class="imageButton" value="Update" onClick="javascript:fnUpdate()">							
												</logic:equal>
												<logic:equal name="questionForm" property="screen_type" value="">
													<input type="button" class="imageButton" value="Submit" onClick="javascript:fnSubmit()">
												</logic:equal>
					                        	</div>
					                        </td>
					        				<td class="lowerCorner2"></td>
					      				</tr>
					    			</table>
					    		</td>
					  		</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>				
	<logic:equal name="questionForm" property="screen_type" value="View">
		<script language="JavaScript">	
			var elements = document.forms[0].elements;
			var type = "";
			for(j=0;j<elements.length;j++){
				type = elements[j].type;
				if(type == 'text' || type == 'select-one' || type == 'radio' || type == 'checkbox' || type == 'button' || type == 'textarea') {
					elements[j].disabled=true;
				}
			}
			
		</script>
	</logic:equal>
	<script language="JavaScript">

	var isCorrectOpt = document.getElementsByName("is_correct");
	</script>
	<logic:equal name="questionForm" property="screen_type" value="Edit">
	<script language="JavaScript">
	
	<logic:present name="questionForm" property="answer_option" >	
		
	<%int ansIndex1 = 0;%>
	<logic:iterate id="ans" name="questionForm" property="answer_option" >		
			
			if(''!= '<bean:write name="ans"  filter="false" />'){
				isCorrectOpt[<%=ansIndex1%>].disabled=false;
			}
			<%ansIndex1++;%>
							
	</logic:iterate>		
	</logic:present>

	</script>
	</logic:equal>
		
	<script language="JavaScript">

	<logic:present name="questionForm" property="answer_option" >	
	var ansOpt = document.getElementsByName("answer_option");
	
	<%int ansIndex = 0;%>
	<logic:iterate id="ans" name="questionForm" property="answer_option" >		
			
					ansOpt[<%=ansIndex++%>].value= '<bean:write name="ans"  filter="false" />';
							
			</logic:iterate>
			if(ansOpt.length-1 >=<%=ansIndex%>){
				for(i=<%=ansIndex%>;i<5;i++){
					ansOpt[i].value="";
				}
			}

			
		
	</logic:present>
	var arrayCorrectAnswer = new Array();
	var arrayIndex = 0;
	<logic:present name="questionForm" property="is_correct" >	
		<logic:iterate id="correctAns" name="questionForm" property="is_correct" >
				arrayCorrectAnswer[arrayIndex++] = <%=correctAns%>;
		</logic:iterate>
	</logic:present>
	for(var temp= 0; temp<arrayCorrectAnswer.length;temp++)
	{
		if(arrayCorrectAnswer[temp]!=-1){
			isCorrectOpt[temp].checked = true;
		}
	}
	</script>
	<script language="JavaScript">


	<logic:equal name="questionForm" property="is_updatable" value="false">
		var ansOpt = document.getElementsByName("answer_option");
		var isCorrect = document.getElementsByName("is_correct");
		document.getElementById("question_statement").disabled=true;
		document.getElementById("question_category_id").disabled=true;
		document.getElementById("question_level_id").disabled=true;		
		document.getElementById("answer_option_image1").disabled=true;
		document.getElementById("answer_option_image2").disabled=true;
		document.getElementById("answer_option_image3").disabled=true;
		document.getElementById("answer_option_image4").disabled=true;	
		document.getElementById("answer_option_image5").disabled=true;
		
		document.getElementById("question_image").disabled=true;
		for(i=0;i<ansOpt.length;i++){
			ansOpt[i].disabled=true ;
		}
		for(i=0;i<isCorrect.length;i++){
			isCorrect[i].disabled=true;
		}
	</logic:equal>
	</script>
	
</html:form>